<template>
  <div class="home">
    <el-container class="layout-body">
      <!--侧边栏菜单-->
      <el-aside :width="isCollapse ? '64px' : '200px'"  style="overflow: hidden;
      background-color:#2d3436;text-align: left">
        <el-menu
            :collapse="isCollapse"
            :default-active="activeMenuItemPath"
            router
            unique-opened
            active-text-color="#ffd04b"
                 background-color="#2d3436"
                 text-color="#D7FFFE" style="border: 0!important;">
          <el-menu-item  index="/blank">
            <i class="el-icon-reading"></i>
            <span>学海明灯考试系统</span>
          </el-menu-item>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-collection"></i>
              <span>考试管理</span>
            </template>
            <el-menu-item index="/bank">
              <i class="el-icon-notebook-1"></i>
              <span>题库管理</span>
            </el-menu-item>
            <el-menu-item index="/question">
              <i class="el-icon-notebook-2"></i>
              <span>试题管理</span>
            </el-menu-item>
            <el-menu-item index="/exam">
              <i class="el-icon-document-copy"></i>
              <span>考试管理</span>
            </el-menu-item>
            <el-menu-item index="/goover-exam">
              <i class="el-icon-data-line"></i>
              <span>阅卷管理</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-pie-chart"></i>
              <span>考试统计</span>
            </template>
            <el-menu-item index="/visual">
              <i class="el-icon-s-data"></i>
              <span>统计总览</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="4" v-if="localUser.roleId<=2">
            <template slot="title">
              <i class="el-icon-printer"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/bulletin">
              <i class="el-icon-bell"></i>
              <span>公告管理</span>
            </el-menu-item>
            <el-menu-item  index="/user">
              <i class="el-icon-share"></i>
              <span>用户管理</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-collection"></i>
              <span>班级管理</span>
            </template>
            <el-menu-item index="/class" v-if="localUser.roleId<=2">
              <i class="el-icon-s-home"></i>
              <span>班级管理</span>
            </el-menu-item>
            <el-menu-item v-if="localUser.roleId<=2" index="/major">
              <i class="el-icon-s-order"></i>
              <span>专业管理</span>
            </el-menu-item>
            <el-menu-item v-if="localUser.roleId===3" index="/class/exam-detail">
              <i class="el-icon-s-promotion"></i>
              <span>我的班级</span>
            </el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>
      <el-main id="mains">
        <el-container>
          <el-header height="100px">
            <el-card class="box-card" style="height: 80px;text-align: left;">
              <div @click="changeIsCollapse()">
                <el-tooltip class="item" content="缩小侧边栏" effect="dark"  placement="top-start">
                  <i class="el-icon-s-fold" style="float: left;margin-top: 10px;cursor:pointer;font-size: 25px;font-weight: 100"></i>
                </el-tooltip>
              </div>
              <h1 style="display: inline-block;margin: 8px 30px">在线考试系统</h1>
              <!--用户头像/信息-->
              <div  style="float: right;margin: 0 20px 0 0">
                <div class="block">
                  <el-dropdown>
                  <el-avatar :size="45" :src="localUser.avatar"></el-avatar>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus">
                      <a  style="text-decoration: none;color: #409EFF;cursor:pointer"
                          @click="goUpdateOwn()">修改资料</a>
                    </el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus-outline" >
                      <a style="text-decoration: none;color: #409EFF;cursor:pointer"
                         @click="goUpdateOwn()">修改密码</a>
                    </el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-check">
                      <a style="text-decoration: none;color: #409EFF;cursor:pointer"
                         @click="logout()">退出登录</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <!--消息通知键-->
              <div style="float: right;margin: 5px 20px 0 0">
                <el-badge :value="noticeSum" type="danger" circle :max="10">
                  <el-button Class="button-i" type="text"  @click="dialogFormVisible=true"><i class="el-icon-bell" style="cursor:pointer"></i></el-button>
                </el-badge>
              </div>

              <!--全屏页面键-->
              <div  style="float: right;margin: 5px 20px 0 0">
                <el-button Class="button-i" type="text" @click="toggleFullScreen"><i class="el-icon-full-screen" style="cursor:pointer"></i></el-button>
              </div>

              <div class="notice-warning">
                <div class="notice-text" v-for="(item,index) in noticeArr" :key="index"><span v-if="index === 0">最新公告：{{item.content}}</span></div>
              </div>
            </el-card>
          </el-header >
          <!--游半部分的下侧：主体-->
          <el-main class="layout-main"
                   style="margin-top: -20px;
                   position: relative;
                   overflow: hidden;">
            <!--将由其他视图组件来显示-->
            <router-view/>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
    <div>
      <el-dialog :visible.sync="dialogFormVisible" width="640px">
        <h1 style="margin-top: -30px">最新公告</h1>
        <el-row>
          <div v-for="(item,index) in noticeArr" :key="index" style="font-size: 20px;margin-top: 20px;text-align: left">
           <span v-if="index<num">
          <el-row>
          <span>{{index+1}}. </span><span>{{item.content}}</span>
          </el-row>
            <span style="font-size: 12px;float: right">发布时间：{{item.gmtModified}}</span></span>
          </div>
        </el-row>
        <el-row>
          <el-button type="success" size="mini" @click="load">点击更多...</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import router from "@/router";

export default {
  data() {
    return {
      activeMenuItemPath:'',
      isCollapse: false,
      localUser:{
        avatar:'',
        roleId:''
      },
      dialogFormVisible:false,
      noticeSum:0,
      num:5,
      noticeArr:[]
      //最新公告条数

    }
  },
  methods:{
    load(){
        if (this.noticeSum>this.num){
          this.num += 5;
        }else{
          this.$message({
            message: '没有更多了',
            type: 'warning',
          });
        }
    },
    toggleFullScreen(){
      var elem = document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }
      if (document.fullscreenElement) {
        document.exitFullscreen();
      }
    },
    router() {
      return router
    },
    logout(){
      let url = "http://localhost:9281/logout1";
      let jwt = localStorage.getItem("localJwt");
      this.axios
          .create({
            'headers':{
              'Authorization':jwt
            }
          })
          .post(url).then((response) => {
        console.log("11111")
        if (response.data.state == 20000||response.data.state == 70100) {
          this.$message({
            showClose: true,
            message: '退出成功',
            type: 'success'
          });
          localStorage.removeItem("localUser");
          this.$router.push('/');
        } else {
          alert(response.data.message);
          this.code(this.options);
        }
      })
    },
    //修改自己的资料
    goUpdateOwn(){
      console.log("--------------")
      this.$router.push('/updateOwn')
    },
    getNoticeArr(){
      let url = "http://localhost:9283/notice/list-status";
      console.log(url);
      let jwt = localStorage.getItem("localJwt");
      this.axios
          .create({
            'headers':{
              'Authorization':jwt
            }
          })
          .get(url).then((response)=>{
        let jsonResult = response.data;
        if(jsonResult.state==20000){
          this.noticeArr = jsonResult.data;
          this.noticeSum = this.noticeArr.length;
        }else {
          this.$alert(jsonResult.message,"错误",{
            confirmButtonText:'确定'
          })
        }
      })
    },

    changeIsCollapse(){
      this.isCollapse = !this.isCollapse
    },
    handleActiveMenuItem(){
      let currentPath = this.$router.currentRoute.path;
      if (currentPath.startsWith('/admin/bank')){
        currentPath = '/admin/bank';
      }
      if (currentPath.startsWith('admin/statistics/VisualChart')){
        currentPath = 'admin/statistics/VisualChart';
      }
      this.activeMenuItemPath = currentPath;
    },
    LoadUser(){
      /*http://localhost:9200/updateOwn*/
      this.localUser = JSON.parse(localStorage.getItem("localUser"));
      let l = localStorage.getItem("loadBank")
      console.log(l)

      if(l==1){
        window.location.reload();
        localStorage.setItem("loadBank",0)
      }
    }
  },
  mounted() {
    this.handleActiveMenuItem();
    this.LoadUser();
    this.getNoticeArr();
  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}
.home{
  width: 100%;
  height: 100%;
}
.layout-body{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#mains{
  width: auto;
  padding: 0;
}
#mains .el-container{
  padding: 0;
}
#mains .el-container .el-header{
  padding: 0;
}
#mains .el-container .el-header button{
  background-color: rgba(0,0,0,0);
  border: 0;
  color: #1772b4;
}
.layout-aside .el-menu{
  border: 0 !important;
  height: 100%;
}
.button-i{
  display: inline-block;
  font-size: 25px;
}
.el-submenu__title:hover, .el-menu-item:hover{
  background-image:linear-gradient(60deg,#29323c 0%, #485563 100%)
}
/*加快侧边栏过度动画*/
.el-menu {
  transition: all 10ms !important;
}

.notice-warning{
  display: inline-block;
  width: 600px;
  height: 32px;
  position: absolute;
  border-radius: 32px;
  float: right;
  margin: 0 auto;
  margin-left: 120px;
  overflow: hidden;
}
.notice-text{
  color: #ff9966;
  font-size: 18px;
  line-height: 36px;
  display: inline-block;
  white-space: nowrap;
  animation: 20s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
  0% {
    transform: translateX(220%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
